'use strict';
const path = require('path');
const defaultSettings = require('./src/settings.js');
function resolve(dir) {
    return path.join(__dirname, dir);
}

const CompressionPlugin = require('compression-webpack-plugin');

const name = process.env.VUE_APP_TITLE || '';
const BundleAnalyzerPlugin =
    require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const port = process.env.port || process.env.npm_config_port || 80; // 端口
const version = new Date().getTime();

// vue.config.js 配置说明, 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
module.exports = {
    publicPath: '/',
    // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
    outputDir: 'dist',
    // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
    assetsDir: 'static',
    // 是否开启eslint保存检测，有效值：ture | false | 'error'
    lintOnSave: process.env.NODE_ENV === 'development',
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    productionSourceMap: false,
    // webpack-dev-server 相关配置
    devServer: {
        host: '0.0.0.0',
        port: port,
        open: true,
        proxy: {
            '/proxy-api': {
                target: `http://localhost:48080`,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        },
        disableHostCheck: true
    },
    // css: {
    //   loaderOptions: {
    //     sass: {
    //       sassOptions: { outputStyle: 'expanded' }
    //     }
    //   }
    // },
    configureWebpack: {
        externals: [
            {
                './cptable': 'var cptable'
            }
        ],
        name: name,
        output: {
            // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            filename: `static/js/[name].${version}.js`,
            chunkFilename: `static/js/[name].${version}.js`
        },
        resolve: {
            alias: {
                // '@': resolve('src')
                '@': path.resolve(__dirname, 'src')
            },
            extensions: ['.js', '.vue', '.json']
        },
        performance: {
            hints: 'warning',
            // 入口起点的最大体积
            maxEntrypointSize: 500000000,
            // 生成文件的最大体积
            maxAssetSize: 300000000,
            // 只给出 js 文件的性能提示
            assetFilter: function(assetFilename) {
                return assetFilename.endsWith('.js');
            }
        },
        plugins: [
            // process.env.NODE_ENV === 'production' ? new BundleAnalyzerPlugin() : null,
            // new CompressionPlugin({
            //   cache: false, // 不启用文件缓存
            //   test: /\.(js|css|html|svg)?$/i, // 压缩文件格式
            //   filename: '[path].gz[query]', // 压缩后的文件名
            //     threshold: 10240,
            //     algorithm: 'gzip', // 使用gzip压缩
            //   minRatio: 0.8 // 压缩率小于1才会压缩
            // })
            // 开启打包压缩
            new CompressionPlugin({
                test: /\.(js|css|html)?$/i, // 压缩文件格式
                filename: '[path].gz[query]', // 压缩后的文件名
                algorithm: 'gzip', // 使用gzip压缩
                minRatio: 0.8, // 压缩率小于1才会压缩
                threshold: 10240,
                deleteOriginalAssets: process.env.NODE_ENV !== 'development' // 是否删除源文件，只留压缩包
            })
        ],
        // 将chunk-vendors分解
        optimization: {
            runtimeChunk: 'single',
            splitChunks: {
                chunks: 'all',
                maxInitialRequests: Infinity,
                minSize: 20000,
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name(module) {
                            const packageName = module.context.match(
                                /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                            )[1];
                            return `npm.${packageName.replace('@', '')}`;
                        }
                    }
                }
            }
        }
    },
    chainWebpack(config) {
        config.plugins.delete('preload'); // TODO: need test
        config.plugins.delete('prefetch'); // TODO: need test
        // set svg-sprite-loader
        config.module
            .rule('svg')
            .exclude.add(resolve('src/assets/icons'))
            .end();
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end();

        config.when(process.env.NODE_ENV !== 'development', (config) => {
            /* config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
            // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end();
          config*/
            config
                // https://webpack.js.org/configuration/devtool/#development
                .when(process.env.NODE_ENV === 'development', (config) =>
                    config.devtool('cheap-source-map')
                );
            config
                .plugin('ScriptExtHtmlWebpackPlugin')
                .after('html')
                .use('script-ext-html-webpack-plugin', [
                    {
                        // `runtime` must same as runtimeChunk name. default is `runtime`
                        inline: /runtime\..*\.js$/
                    }
                ])
                .end();
        });
    }
};
